why does tsc dump the "implements ..." part of the following Typescript class when compiling to JavaScript ?
tsc version: Version 4.6.2 / Node version: v17.4.0
compilation command:
tsc -t es6 test.ts
// test.ts
class MyElement extends HTMLElement implements HTMLDivElement {
align: string;
constructor() {
super();
this.align = "center";
}
public connectedCallback(): void {
this.style.backgroundColor = "red";
this.style.width = "100px";
this.style.height = "100px";
}
}
window.customElements.define('my-element', MyElement);
const myElement = document.createElement("my-element");
const Content = document.createTextNode("My text!");
myElement.appendChild(Content);
// connectedCallback is called when appended to another element
document.body.appendChild(myElement);
// test.js
class MyElement extends HTMLElement {
constructor() {
super();
this.align = "center";
}
connectedCallback() {
this.style.backgroundColor = "red";
this.style.width = "200px";
this.style.height = "100px";
}
}
window.customElements.define('my-element', MyElement);
const myElement = document.createElement("my-element");
const Content = document.createTextNode("my text!");
myElement.appendChild(Content);
// connectedCallback is called when appended to another element
document.body.appendChild(myElement);
Apparently the workaround is as follows:
class MyElement extends HTMLDivElement {
constructor() {
super();
this.style.width = "100px";
this.style.height = "500px";
this.style.backgroundColor = "red";
}
}
customElements.define('my-element', MyElement, {extends: 'div'});
const myElement = new MyElement();
const Content = document.createTextNode("my text!");
myElement.appendChild(Content);
// connectedCallback is called when appended to another element
document.body.appendChild(myElement);